<template>
	<view>
		<view class="set-box">
			<view class="view-list-item">
				<text class="text-list-item">头像</text>
				<image @click="show = true" class="img" src="../../static/jiaotong.png" mode=""></image>
				<image class="img-right" src="../../static/right.png" mode=""></image>
			</view>

			<view class="view-list-item" @click="center = true">
				<text class="text-list-item">昵称</text>
				<image class="img-right" src="../../static/right.png" mode=""></image>
			</view>

			<view class="view-list-item" @click="password">
				<text class="text-list-item">修改密码</text>
				<image class="img-right" src="../../static/right.png" mode=""></image>
			</view>

			<view class="view-list-item" @click="phone">
				<text class="text-list-item">手机号</text>
				<image class="img-right" src="../../static/right.png" mode=""></image>
			</view>
		</view>

		<u-popup :round="10" :show="show" @close="close" @open="open">
			<view class="popup-box">
				<view class="title">拍摄</view>
				<view style="height: 1rpx; background-color: #f9f9f9;"></view>
				<view class="title">从手机相册选择</view>
				<view class="blank"></view>
				<view class="title" @click="show = false">取消</view>
			</view>
		</u-popup>

		<u-popup mode="center" :round="10" :show="center" @close="close" @open="open">
			<view class="popup-center">
				<view class="title">修改昵称</view>
				<view class="input">
					<!-- <u--input inputAlign="center" placeholder="请输入新的昵称" border="surround" v-model="value" @change="change"></u--input> -->
					<input v-model="nickname" placeholder="请输入新的昵称" type="text">
				</view>
				<view class="btn">
					<view @click="center = false" class="cancel">取消</view>
					<view @click="confirm" class="confirm">确定</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				center: false,
				value: '',
				nickname:'' //昵称
			}
		},

		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				this.center = false
				// console.log('close');
			},
			change(e) {
				console.log('change', e);
			},
			confirm() {
				if(this.nickname == '') {
					
				}
				this.center = false
			},
			password() {
				uni.navigateTo({
					url:'/pages/change-password/change-password'
				})
			},
			phone() {
				uni.navigateTo({
					url:'/pages/binding-phone/binding-phone'
				})
			}
		}
	}
</script>

<style lang="scss">
	.set-box {
		background-color: #FFF;
		margin-top: 40rpx;
		width: 95%;
		margin: auto;

		.view-list-item {
			display: flex;
			align-items: center;
			background-color: #FFF;
			height: 100rpx;
			padding: 0 30rpx;
			border-top: 1rpx solid #f1f1f1;

			.text-list-item {
				flex-grow: 1;
				flex-shrink: 1;
				font-size: 30rpx;
				color: #222;
			}

			.img {
				width: 80rpx;
				height: 80rpx;
			}

			.img-right {
				margin-left: 18rpx;
				width: 12rpx;
				height: 20rpx;
			}
		}
	}

	.popup-box {
		height: 356rpx;

		.title {
			height: 110rpx;
			text-align: center;
			line-height: 110rpx;
		}

		.blank {
			height: 20rpx;
			background-color: #f8f8f8;
		}
	}

	.popup-center {
		width: 600rpx;
		height: 360rpx;

		.title {
			text-align: center;
			margin-top: 46rpx;
			font-size: 34rpx;
		}
		
		.input {
			width: 480rpx;
			height: 92rpx;
			background-color: #F7F7F7;
			margin: auto;
			margin-top: 46rpx;
			text-align: center;
			
			input {
				position: relative;
				top: 20rpx;
			}
		}
		
		.btn {
			width: 100%;
			height: 90rpx;
			margin-top: 20rpx;
			display: flex;
			// background-color: darkcyan;
			
			.cancel {
				width: 49%;
				height: 100%;
				text-align: center;
				line-height: 90rpx;
				font-size: 28rpx;
				color: #999;
				border-top: 1rpx solid #f3f3f3;
				border-right: 1rpx solid #f3f3f3;
			}
			
			.confirm {
				width: 49%;
				text-align: center;
				line-height: 90rpx;
				font-size: 28rpx;
				color: #1D2DA7;
				border-top: 1rpx solid #f3f3f3;
			}
		}
	}
</style>
